/* eslint-disable array-callback-return */
import React from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Button, Row, Col, Divider, message, Spin } from 'antd';
import router from 'umi/router';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import DescriptionList from '@/components/DescriptionList';
import FooterToolbar from '@/components/FooterToolbar';
import downloadFile, { urlParse, matchDict } from '@/utils/utils';
import styles from '@/utils/utils.less';

const { Description } = DescriptionList;
@connect(({ customer, loading }) => ({
  loading: loading.models.customer,
  customer,
}))
@Form.create()
class Details extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      custInfo: {
        mailAddrList: [],
        custBankList: [],
        custContactsList: [],
        custCostCenterList: [],
        custAffixList: [],
        invoiceList: [],
      },
      corpNature: [],
      industryCode: [],
      idType: [],
      taxerType: [],
      bankId: [],
      gender: [],
      hasChild: [],
      custId: null,
    };
  }

  componentDidMount() {
    const { location } = this.props;
    const custId = urlParse(location.search).custId ? urlParse(location.search).custId : null;
    this.getDictList(() => this.getList(custId));
  }

  // 获取数据
  getList = custId => {
    const { taxerType, bankId, gender, hasChild } = this.state;
    const { dispatch } = this.props;
    if (custId) {
      dispatch({
        type: 'customer/getCustomer',
        payload: {
          custId,
        },
      }).then(res => {
        if (res.success && res.data) {
          const custInfo = res.data;
          Object.keys(custInfo).forEach(key => {
            if (!custInfo[key] && !(custInfo[key] instanceof Array)) {
              custInfo[key] = '';
            } else if (key === 'corpNature' || key === 'industryCode' || key === 'idType') {
              // eslint-disable-next-line react/destructuring-assignment
              custInfo[key] = matchDict(this.state[key], custInfo[key]);
            } else if (custInfo[key] instanceof Array && custInfo[key].length) {
              custInfo[key].map(item => {
                const temp = item;
                if (
                  item.areaName === '市辖区' ||
                  item.areaName === '市辖县' ||
                  item.areaName === '县'
                ) {
                  temp.areaName = item.areaParentName;
                }
                if (item.taxerType) {
                  temp.taxerType = matchDict(taxerType, item.taxerType);
                }
                if (item.bankId) {
                  temp.bankId = matchDict(bankId, item.bankId);
                }
                if (item.gender) {
                  temp.gender = matchDict(gender, item.gender);
                }
                if (item.hasChild) {
                  temp.hasChild = matchDict(hasChild, item.hasChild);
                }
              });
            }
          });
          this.setState({ custInfo });
        } else {
          message.warning(`${res.message || '暂无数据！'}`);
        }
      });
    } else {
      router.push('/salemanage/customer/index');
    }
  };

  // 获取字典:
  getDictList = callback => {
    const { dispatch } = this.props;
    dispatch({
      type: 'publicdata/fetchDictCode',
      payload: [
        'CORP_NATURE',
        'INDST_CODE',
        'CUST_ID_TYPE',
        'TAXPAYER_TYPE',
        'BANK_ID',
        'GENDER',
        'HAS_CHILD',
      ],
    }).then(res => {
      this.setState({
        corpNature: res.CORP_NATURE,
        industryCode: res.INDST_CODE,
        idType: res.CUST_ID_TYPE,
        taxerType: res.TAXPAYER_TYPE,
        bankId: res.BANK_ID,
        gender: res.GENDER,
        hasChild: res.HAS_CHILD,
      });
      callback();
    });
  };

  render() {
    const { custInfo } = this.state;
    const { loading } = this.props;
    return custInfo ? (
      <PageHeaderWrapper>
        <Card title={<span style={{ fontWeight: 'bolder' }}>客户信息</span>}>
          <div>
            <DescriptionList
              title={
                <span style={{ fontSize: 14, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}>
                  基本信息
                </span>
              }
            >
              <Description term="签约方">{custInfo.suppName || '--'}</Description>
              <Description term="客户名称">{custInfo.name || '--'}</Description>
              <Description term="统一社会信用代码">{custInfo.uniCreditCode || '--'}</Description>
              <Description term="客户编号">{custInfo.no || '--'}</Description>
              <Description term="公司类型">{custInfo.corpNature || '--'}</Description>
              <Description term="行业分类">{custInfo.industryCode || '--'}</Description>
              <Description term="财务NC编码">{custInfo.fmNcNo || '--'}</Description>
              <Description term="办公地址">{custInfo.detailAddress || '--'}</Description>
              <Description term="工作邮箱">{custInfo.email || '--'}</Description>
              <Description term="负责人">{custInfo.primName || '--'}</Description>
              <Description term="创建人">{custInfo.creName || '--'}</Description>
              <Description term="备注">{custInfo.remark || '--'}</Description>
            </DescriptionList>
            <Row
              gutter={16}
              type="flex"
              justify="start"
              style={{ marginBottom: 12, marginTop: 20 }}
              className={styles.annexStyle}
            >
              <Col style={{ color: 'rgba(0, 0, 0, 0.85)'}}>附件：</Col>
              {custInfo.custAffixList && custInfo.custAffixList.length
                ? custInfo.custAffixList.map(item => (
                  <Row key={item.custAffixId} style={{ marginRight: 30 }}>
                    <a
                      onClick={e => {
                        e.preventDefault();
                        downloadFile({ fileId: item.custAffixId, fileName: item.affixName });
                      }}
                    >
                      {item.affixName || '--'}
                    </a>
                  </Row>
                ))
                : null}
            </Row>
          </div>
          {/* 发票信息 */}
          {custInfo.invoiceList && custInfo.invoiceList.length ? (
            <div>
              <Divider />
              {custInfo.invoiceList.map((item, index) => (
                <div key={item.invId}>
                  {index === 0 ? null : <Divider dashed />}
                  <DescriptionList
                    title={
                      index === 0 ? (
                        <span
                          style={{ fontSize: 14, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}
                        >
                          发票信息
                        </span>
                      ) : null
                    }
                  >
                    <Description term="增值税单位名称">{item.vatCoprName || '--'}</Description>
                    <Description term="发票类型">{item.invTypeName || '--'}</Description>
                    <Description term="纳税人识别号">{item.taxerIdNo || '--'}</Description>
                    <Description term="开户行">{item.bankOfDepoName || '--'}</Description>
                    <Description term="银行账号">{item.bankAcco || '--'}</Description>
                    <Description term="开票电话">{item.invPhone || '--'}</Description>
                    <Description term="开票地址">{item.invAddr || '--'}</Description>
                    <Description term="备注">{item.remark || '--'}</Description>
                  </DescriptionList>
                  <Row
                    gutter={16}
                    type="flex"
                    justify="start"
                    style={{ marginBottom: 12, marginTop: 20 }}
                    className={styles.annexStyle}
                  >
                    <Col style={{ color: 'rgba(0, 0, 0, 0.85)' }}>附件：</Col>
                    {item.invoiceAffixList && item.invoiceAffixList.length
                      ? item.invoiceAffixList.map(items => (
                        <Row key={items.custAffixId} style={{ marginRight: 30 }}>
                          <a
                            onClick={e => {
                              e.preventDefault();
                              downloadFile({
                                fileId: items.custAffixId,
                                fileName: items.affixName,
                              });
                            }}
                          >
                            {items.affixName || '--'}
                          </a>
                        </Row>
                      ))
                      : null}
                  </Row>
                </div>
              ))}
            </div>
          ) : null}
          {/* 邮寄地址信息 */}
          {custInfo.mailAddrList && custInfo.mailAddrList.length ? (
            <div>
              <Divider />
              {custInfo.mailAddrList.map((item, index) => (
                <div key={item.mailAddrId}>
                  {index === 0 ? null : <Divider dashed />}
                  <DescriptionList
                    title={
                      index === 0 ? (
                        <span
                          style={{ fontSize: 14, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}
                        >
                          邮寄地址信息
                        </span>
                      ) : null
                    }
                  >
                    <Description term="联系人姓名">{item.contPerName || '--'}</Description>
                    <Description term="联系人电话">{item.contPerPhone || '--'}</Description>
                    <Description term="邮寄地址">
                      {item.mailArea || '--'}
                      {item.mailAddr}
                    </Description>
                    <Description term="备注">{item.remark || '--'}</Description>
                  </DescriptionList>
                </div>
              ))}
            </div>
          ) : null}
          {/* 银行账户信息 */}
          {custInfo.custBankList && custInfo.custBankList.length ? (
            <div>
              <Divider />
              {custInfo.custBankList.map((item, index) => (
                <div key={item.bankAccoId}>
                  {index === 0 ? null : <Divider dashed />}
                  <DescriptionList
                    title={
                      index === 0 ? (
                        <span
                          style={{ fontSize: 14, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}
                        >
                          银行账户信息
                        </span>
                      ) : null
                    }
                  >
                    <Description term="城市">{item.areaName || '--'}</Description>
                    <Description term="银行">{item.bankId || '--'}</Description>
                    <Description term="开户行">{item.bankOfDepoName || '--'}</Description>
                    <Description term="银行账号">{item.bankAcco || '--'}</Description>
                    <Description term="开户单位名称">{item.accoHolderName || '--'}</Description>
                    <Description term="备注">{item.remark || '--'}</Description>
                  </DescriptionList>
                </div>
              ))}
            </div>
          ) : null}
          {/* 联系人信息 */}
          {custInfo.custContactsList && custInfo.custContactsList.length ? (
            <div>
              <Divider />
              {custInfo.custContactsList.map((item, index) => (
                <div key={item.contPerId}>
                  {index === 0 ? null : <Divider dashed />}
                  <DescriptionList
                    title={
                      index === 0 ? (
                        <span
                          style={{ fontSize: 14, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}
                        >
                          联系人信息
                        </span>
                      ) : null
                    }
                  >
                    <Description term="姓名">{item.name || '--'}</Description>
                    <Description term="性别">{item.gender || '--'}</Description>
                    <Description term="职位">{item.position || '--'}</Description>
                    <Description term="手机号码">{item.phoneNo || '--'}</Description>
                    <Description term="固定电话">{item.tel || '--'}</Description>
                    <Description term="QQ">{item.qq || '--'}</Description>
                    <Description term="微信">{item.wx || '--'}</Description>
                    <Description term="邮箱">{item.email || '--'}</Description>
                    <Description term="地址">{item.addr || '--'}</Description>
                    <Description term="生日">{item.birthDay || '--'}</Description>
                    <Description term="是否有小孩">{item.hasChild || '--'}</Description>
                    <Description term="备注">{item.remark || '--'}</Description>
                  </DescriptionList>
                </div>
              ))}
            </div>
          ) : null}
          {/* 成本中心信息 */}
          {custInfo.custCostCenterList && custInfo.custCostCenterList.length ? (
            <div>
              <Divider />
              <DescriptionList
                title={
                  <span style={{ fontSize: 14, color: 'rgba(0,0,0,.85)', fontWeight: 'bold' }}>
                    成本中心信息
                  </span>
                }
              >
                {custInfo.custCostCenterList.map(item => (
                  <Description key={item.costCenterId}>{item.name || '--'}</Description>
                ))}
              </DescriptionList>
            </div>
          ) : null}
        </Card>
        <FooterToolbar style={{ width: '100%' }}>
          <Button onClick={() => router.goBack()}>返回</Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    ) : (
      <div style={{ position: 'relative', top: '50%', textAlign: 'center' }}>
        <Spin tip="Loading..." spinning={loading} />
      </div>
    );
  }
}
export default Details;
